<template>
  <div>
    <el-dialog
      @opened="open"
      @closed="close"
      :title="mode ? '新增题库测试' : '编辑题库测试'"
      :visible.sync="dialogVisible"
      fullscreen
    >
      <el-form
        class="form"
        label-position="left"
        label-width="80px"
        :model="form"
        ref="form"
        :rules="rules"
      >
        <el-form-item label="学科" prop="subject">
          <el-select v-model="form.subject" placeholder="请选择">
            <el-option
              v-for="item in subjectlist"
              :key="item.id"
              :value="item.id"
              :label="item.name"
            >
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="阶段" prop="step">
          <el-select v-model="form.step" placeholder="请选择">
            <el-option key="1" label="初级" :value="1"> </el-option>
            <el-option key="2" label="中级" :value="2"> </el-option>
            <el-option key="3" label="高级" :value="3"> </el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="企业" prop="enterprise">
          <el-select v-model="form.enterprise" placeholder="请选择">
            <el-option
              v-for="item in enterpriselist"
              :key="item.id"
              :value="item.id"
              :label="item.name"
            >
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="城市" prop="city">
          <el-cascader :options="options" v-model="form.city"></el-cascader>
        </el-form-item>

        <el-form-item label="题型" prop="type">
          <el-radio v-model="form.type" :label="1">单选</el-radio>
          <el-radio v-model="form.type" :label="2">多选</el-radio>
          <el-radio v-model="form.type" :label="3">简答</el-radio>
        </el-form-item>

        <el-form-item label="难度" prop="difficulty">
          <el-radio v-model="form.difficulty" :label="1">简单</el-radio>
          <el-radio v-model="form.difficulty" :label="2">一般</el-radio>
          <el-radio v-model="form.difficulty" :label="3">困难</el-radio>
        </el-form-item>

        <hr />
        <el-form-item class="title" label-width="0px" prop="title">
          <template #label>试题标题</template>
          <template #default>
            <div>
              <quill-editor
                class="quill"
                ref="myQuillEditorone"
                v-model="form.title"
                :options="quillOption"
              >
              </quill-editor>
            </div>
          </template>
        </el-form-item>

        <!-- 单选 -->
        <div v-show="form.type == '1'">
          <el-form-item label="单选" class="danxuan" :prop="proprules">
            <div class="item">
              <el-radio v-model="form.single_select_answer" label="A">
              </el-radio>
              <span class="input">
                <el-input v-model="form.select_options[0].text"></el-input>
              </span>
              <span
                ><upload v-model="form.select_options[0].image"></upload
              ></span>
            </div>

            <div class="item">
              <el-radio v-model="form.single_select_answer" label="B">
              </el-radio>
              <span class="input">
                <el-input v-model="form.select_options[1].text"></el-input>
              </span>
              <span
                ><upload v-model="form.select_options[1].image"></upload
              ></span>
            </div>

            <div class="item">
              <el-radio v-model="form.single_select_answer" label="C">
              </el-radio>
              <span class="input">
                <el-input v-model="form.select_options[2].text"></el-input>
              </span>
              <span
                ><upload v-model="form.select_options[2].image"></upload
              ></span>
            </div>

            <div class="item">
              <el-radio v-model="form.single_select_answer" label="D">
              </el-radio>
              <span class="input">
                <el-input v-model="form.select_options[3].text"></el-input>
              </span>
              <span
                ><upload v-model="form.select_options[3].image"></upload
              ></span>
            </div>
          </el-form-item>
        </div>

        <!-- 多选 -->
        <div v-show="form.type == '2'">
          <el-form-item label="多选" :prop="proprules">
            <!-- <el-checkbox-group v-model="form.multiple_select_answer">
              <el-checkbox label="复选框 A"></el-checkbox>
              <el-checkbox label="复选框 B"></el-checkbox>
              <el-checkbox label="复选框 C"></el-checkbox>
              <el-checkbox label="禁用" disabled></el-checkbox>
              <el-checkbox label="选中且禁用" disabled></el-checkbox>
            </el-checkbox-group> -->

            <el-checkbox-group v-model="form.multiple_select_answer">
              <div class="item">
                <el-checkbox label="A"></el-checkbox>
                <span class="input">
                  <el-input v-model="form.select_options[0].text"></el-input>
                </span>
                <span
                  ><upload v-model="form.select_options[0].image"></upload
                ></span>
              </div>

              <div class="item">
                <el-checkbox label="B"></el-checkbox>
                <span class="input">
                  <el-input v-model="form.select_options[1].text"></el-input>
                </span>
                <span
                  ><upload v-model="form.select_options[1].image"></upload
                ></span>
              </div>

              <div class="item">
                <el-checkbox label="C"></el-checkbox>
                <span class="input">
                  <el-input v-model="form.select_options[2].text"></el-input>
                </span>
                <span
                  ><upload v-model="form.select_options[2].image"></upload
                ></span>
              </div>

              <div class="item">
                <el-checkbox label="D"></el-checkbox>
                <span class="input">
                  <el-input v-model="form.select_options[3].text"></el-input>
                </span>
                <span
                  ><upload v-model="form.select_options[3].image"></upload
                ></span>
              </div>
            </el-checkbox-group>
          </el-form-item>
        </div>

        <!-- 简答 -->
        <div v-show="form.type == '3'">
          <el-form-item :prop="proprules" label="简答">
            <el-input type="textarea" autosize v-model="form.short_answer">
            </el-input>
          </el-form-item>
        </div>

        <el-form-item label="解析视频">
          <myvideo></myvideo>
          <div>只能上传视频格式文件</div>
        </el-form-item>

        <el-form-item class="title" label-width="0px" prop="answer_analyze">
          <template #label>答案解析</template>
          <template #default>
            <div>
              <quill-editor
                :disabled="disabled"
                class="quill"
                ref="myQuillEditor"
                v-model="form.answer_analyze"
                :options="quillOption"
              >
              </quill-editor>
            </div>
          </template>
        </el-form-item>
        <hr style="margin:50px 0px" />

        <el-form-item label="试题备注" prop="remark">
          <el-input type="textarea" autosize v-model="form.remark"> </el-input>
        </el-form-item>
      </el-form>

      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="sumbit">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { questionadd, questionedit, questionone } from '@/api/tklb'
import { quillEditor } from 'vue-quill-editor'
import upload from './upload.vue'
import myvideo from './videoupload.vue'
import quillConfig from '@/utils/quill-config'
import { regionData } from '../../../../node_modules/element-china-area-data'
export default {
  name: 'dia',
  components: {
    quillEditor,
    upload,
    myvideo
  },

  data () {
    const toolbarOptions = [['bold', 'italic', 'underline', 'image']]
    return {
      disabled: true,
      city: '',
      mode: true,
      content: '',
      quillOption: quillConfig,

      editorOption: {
        modules: {
          toolbar: toolbarOptions,
          theme: 'snow'
        }
      },
      subjectlist: [],
      enterpriselist: [],
      options: regionData,
      dialogVisible: false,
      item: {},
      form: {
        single_select_answer: '', //
        multiple_select_answer: [], //
        short_answer: '', //
        video: '', //
        answer_analyze: '', //
        remark: '', //
        select_options: [
          { label: 'A', text: '', image: '' },
          { label: 'B', text: '', image: '' },
          { label: 'C', text: '', image: '' },
          { label: 'D', text: '', image: '' }
        ], //
        subject: '', //
        step: '', //
        enterprise: '', //
        type: 1, //
        difficulty: '', //
        title: '', //
        city: [] //
      },
      rules: {
        subject: [{ required: true, message: '必填', trigger: 'blur' }],
        step: [{ required: true, message: '必填', trigger: 'blur' }],
        enterprise: [{ required: true, message: '必填', trigger: 'blur' }],
        city: [{ required: true, message: '必填', trigger: 'blur' }],
        type: [{ required: true, message: '必填', trigger: 'blur' }],
        difficulty: [{ required: true, message: '必填', trigger: 'blur' }],
        title: [{ required: true, message: '必填', trigger: 'blur' }],
        single_select_answer: [
          { required: true, message: '必填', trigger: 'blur' }
        ],
        answer_analyze: [{ required: true, message: '必填', trigger: 'blur' }],
        remark: [{ required: true, message: '必填', trigger: 'blur' }],
        multiple_select_answer: [
          { required: true, message: '必填', trigger: 'blur' }
        ],
        short_answer: [{ required: true, message: '必填', trigger: 'blur' }]
      }
    }
  },
  methods: {
    open () {
      this.disabled = false
      this.$refs.myQuillEditor.quill.root.onclick = () => {
        this.$nextTick(() => {
          this.$refs.myQuillEditor.quill.root.focus()
        })
      }
    },

    async editevent (id) {
      const res = await questionone({ id })
      this.form = this.item
      this.form.select_options = res.data.options
      this.form.city = res.data.city.split(',')
    },
    close () {
      this.form = {
        single_select_answer: '', //
        multiple_select_answer: [], //
        short_answer: '', //
        video: '', //
        answer_analyze: '', //
        remark: '', //
        select_options: [
          { label: 'A', text: '', image: '' },
          { label: 'B', text: '', image: '' },
          { label: 'C', text: '', image: '' },
          { label: 'D', text: '', image: '' }
        ], //
        subject: '', //
        step: '', //
        enterprise: '', //
        type: 1, //
        difficulty: '', //
        title: '', //
        city: [] //
      }

      this.$refs.form.resetFields()
      this.disabled = true
    },
    sumbit () {
      this.$refs.form.validate(async result => {
        if (result) {
          if (this.mode) {
            // console.log(this.form)
            await questionadd(this.form)
            // console.log(res)
            this.$message.success('添加成功')
          } else {
            await questionedit({ ...this.form, city: this.form.city.join(',') })
            // console.log(res)
            this.$message.success('编辑成功')
          }

          this.$emit('getdata')
          this.dialogVisible = false
        } else {
          this.$message.error('验证失败')
        }
      })
    }
  },
  computed: {
    proprules () {
      if (this.form.type == '1') {
        return 'single_select_answer'
      } else if (this.form.type == '2') {
        return 'multiple_select_answer'
      } else if (this.form.type == '3') {
        return 'short_answer'
      }
    }
  }
}
</script>

<style scoped lang="less">
.form {
  margin: 0 auto;
  width: 800px;
}

.el-dialog {
  display: flex;
  align-items: center;
}
::v-deep {
  .el-dialog__header {
    background: linear-gradient(90deg, #01c4fa, #1294fa);
    padding: 0;
    height: 53px;
    line-height: 53px;
    .el-icon-close {
      font-size: 20px;
      color: #fff;
    }
  }
  .el-dialog__title {
    // line-height: 53px;
    padding-left: 15px;

    color: #fff;
  }
}

.dialog-footer {
  display: flex;
  justify-content: center;
}
.title {
  ::v-deep .el-form-item__label {
    float: none;
  }
}

.item {
  display: flex;
  align-items: center;
  .input {
    flex: 1;
    // width: 100%;
  }
}
</style>
